<script setup>
import { ref,onMounted } from 'vue'
import {gradesApi} from "../../../api/study";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from 'vue-router'
import {useStudyStore} from '../../../stores/studystore'

const store=useStudyStore()
const router=useRouter()
// 我的班级 数据
const grades=ref([])

// 页面打开就会执行
onMounted(()=>{
  loadData()
})
//查询 请求接口
const loadData=async ()=>{
  const r=await gradesApi({sid: store.student.id});
  grades.value=r.data;
}
const tzCourse=(obj)=>{
  //路由跳转--->我的课程
  store.grade=obj
  router.push("/study/course")
}

</script>
<template>
  <Box>

    <el-row>
      <el-col v-for="g in grades" :key="g.id" :span="6">
          <el-card @click="tzCourse(g)" style="max-width: 480px" shadow="always">
          <template #header>{{g.name}}</template>
          <div class="dv2"><label class="lb1">班级状态：</label><label class="lb2">{{g.status}}</label></div>
          <div class="dv2"><label class="lb1">开班日期：</label><label class="lb2">{{g.startDate}}</label></div>
          <div class="dv2"><label class="lb1">毕业日期：</label><label class="lb2">{{g.endDate}}</label></div>
          <div class="dv2"><label class="lb1">班级介绍：</label><label class="lb2">{{g.info}}</label></div>
          <div class="dv2"><label class="lb1">班级形式：</label><label class="lb2">{{g.type}}</label></div>
          <div class="dv2"><label class="lb1">班级学分：</label><label class="lb2">{{g.credit}}</label></div>
        </el-card>
      </el-col>
    </el-row>
  </Box>
</template>

<style>
.lb2{
  font-size: large;
}
.dv2{
  margin-top:10px
}
</style>
